<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <el-timeline>
          <el-timeline-item v-for="(item) in listItems" :key="item.id" :timestamp="item['created_at']" placement="top">
            <router-link :to="{ name:'blogDetail', params: { articleId: item.id } }">
              <BoxCard :item-info="item" />
            </router-link>
          </el-timeline-item>
        </el-timeline>
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :total="total"
            :current-page="currentPage"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BoxCard from '@/views/home/components/BoxCard'
import { fetchClassList } from '@/api/article'

export default {
  name: 'CategoryList',
  components: { BoxCard },
  data() {
    return {
      classId: 0,
      total: 0,
      currentPage: 1,
      pageSize: 10,
      listItems: []
    }
  },
  mounted() {
    this.classId = this.$route.params['classId']
    fetchClassList(this.classId, this.currentPage, this.pageSize).then(res => {
      this.listItems = res.data['list']
      this.total = res.data['cnt']
    })
  },
  methods: {
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.updateListItems()
    },
    updateListItems() {
      fetchClassList(this.currentPage, this.pageSize).then(res => {
        this.listItems = res.data['list']
        this.total = res.data['cnt']
      })
    }
  }
}
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
}

a {
  text-decoration: none; /* 去除默认的下划线 */
  outline: none; /* 去除旧版浏览器的点击后的外虚线框 */
  color: #000; /* 去除默认的颜色和点击后变化的颜色 */
}
</style>
